<template>
	<view class="all">
		<TotleVue title=""></TotleVue>
		<img :src="shopBox.shop_img" alt="" class="_img" />
		<p class="topText">{{shopBox.shopname}}</p>
		<p class="addressText">
			<span>{{shopBox.stresst}}</span>
			<span>|</span>
			<span>{{shopBox.type}}</span>
		</p>
		<p class="timeText">
			<span>营业时间:{{shopBox.time}}</span>
		<p class="timeTextchil">
			<u-icon name="clock-fill" color="white" size="40rpx"></u-icon>
			<span style="40rpx">{{shopBox.statue}}</span>
		</p>
		</p>
		<view class="tel">
			<p style="display: flex;width: 80%;justify-content: center;">
				<u-icon name="map-fill" color="white" size="40rpx" style="margin-right: 1rem;"></u-icon>
				<span class="telText">
					{{shopBox.address}}
				</span>
			</p>
			<p style="background-color: black;padding: 0.5rem;border-radius: 50%;"><u-icon name="phone-fill"
					color="orange" size="40rpx"></u-icon></p>
		</view>
		<view class="boxShop" v-for="ele in goodsList" :key="ele._id" @click="getShopDatails(ele._id)">
			<view style="display: flex;justify-content: space-around;">
				<img :src="ele.img" alt="" class="_imgBox" />
				<p class="boxText">
					{{ele.name}}
				</p>
			</view>
			<view class="boxPrice">
				<p>
					<span style="font-size: 30rpx;color: #6d7e7f;">已售 {{ele.sale_num}}</span>
				</p>
				<p>
					<s style="font-size: 30rpx;color: #6d7e7f;">￥{{ele.price}}</s>
					<span style="font-size: 35rpx;color: red;"><b>￥{{ele.price*ele.detailts}}</b></span>
				</p>
			</view>
		</view>
	</view>
</template>

<script setup>
	import TotleVue from "../../Totle.vue";
	import {
		get_shop_box,
		get_shop_goods
	} from "../../../../api/api";
	import {
		onMounted,
		ref
	} from "vue";

	const getShopDatails = (id) => {
		uni.navigateTo({
			url: "/pages/Find/Happy/Shopdatails/Shopdatails?id="+id
		});
	};



	//传递的参数
	const props = defineProps();
	//商店数据
	const shopBox = ref({});
	//商品数据
	const goodsList = ref([]);
	//获取具体商店
	const getShop = async (id) => {
		let res = await get_shop_box({
			_id: id
		});
		shopBox.value = res.data[0];
		getShopGoods(res.data[0].goodsAll);
	};

	const getShopGoods = async (ids) => {
		let res = await get_shop_goods({
			ids
		});
		goodsList.value = res.data;
	};

	onMounted(() => {
		getShop(props.id);
	});
</script>

<style lang="scss" scoped>
	.all {
		width: 100vw;
		height: 100vh;
		background-color: #191919;
		color: white;
	}

	._img {
		width: 100%;
		height: 13rem;
		border: 1px solid white;
	}

	.allBox {
		width: 100vw;
		height: 100vh;
		background-color: white;
	}

	.topText {
		color: white;
		overflow: hidden;
		line-height: 40px;
		width: 60%;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-left: 10%;
	}

	.addressText {
		padding-left: 10%;
		color: white;
		font-size: 12px;
		display: flex;

		span {
			margin-right: 10px;
		}
	}

	.timeText {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 10%;
		padding-top: 1%;
		color: white;
		font-size: 12px;
	}

	.timeTextchil {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: orangered;
		padding: 0.2rem;
		margin-right: 2rem;
		border-radius: 30rpx;
	}

	.tel {
		width: 97%;
		height: 100rpx;
		background-color: #21262d;
		margin: 1rem auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 2.5rem 1rem;
		border-radius: 10rpx;
	}

	.telText {
		width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.boxShop {
		width: 100%;
		// height: 100%;
		padding: 0.7rem;
		background-color: #21262d;
		margin: 1rem auto;
		display: flex;
		flex-wrap: wrap;
	}

	.boxText {
		width: 70%;
		padding: 0.5rem;
		font-size: 30rpx;
		color: white;
	}

	._imgBox {
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
	}

	.boxPrice {
		width: 70%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 1rem;
		margin-left: 3rem;
	}
</style>